<template>
  <div class="background">
    <!-- 内容盒子 -->
    <div class="box">
      <h1>忘记密码</h1>
      <el-input placeholder="请输入账号邮箱" v-model="change_from.email">
        <template #append>
          <span class="code-button" @click="onGetVerifyCode()">获取验证码</span>
        </template>
      </el-input>
      <el-input placeholder="请输入验证码" v-model="change_from.code"></el-input>
      <form>
        <el-input placeholder="请输入新密码" v-model="change_from.password"></el-input>
      </form>
      <div class="btn-box">
        <el-button class="subButton" @click="onChange()">修改密码</el-button>
        <el-button class="subButton" @click="$router.back()">返回上一级</el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import userHttp from '@/api/userHttp'
import { openInfo } from '@/utils/openInfo'
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
//修改密码表单
const change_from = reactive({
  email: "",
  code: null,
  password: "", //新密码
  codeType: "change", //验证码类型
})

//获取验证码
function onGetVerifyCode() {
  if (change_from.email == "") {
    openInfo("请先输入邮箱！", 'warning')
  } else {
    userHttp.sendVerifyCode(change_from.email, change_from.codeType).then((res) => {
      if (res.code == 200) {
        openInfo(res.msg, 'success')
      } else {
        openInfo(res.msg, 'warning')
      }

    })
  }
}

//添加一个数据验证
//验证用户名是否由11位字母或数字组成
function is11AlphaNumeric(str) {
  // 正则表达式：匹配11位数字或字母
  const regex = /^[a-zA-Z0-9]{11}$/;
  return regex.test(str);
}

//修改密码表单
function onChange() {
  if (change_from.email == "" || change_from.password == "" || change_from.code == null) {
    openInfo("请输入完整表单信息!", 'warning')
  } else if (!is11AlphaNumeric(change_from.password)) {
    openInfo("密码因该由11位字母或数字!") //密码这个没有测试过
  } else {
    userHttp.alterPassword(change_from).then((res) => {//提交表单
      if (res.code == 200) {
        openInfo(res.msg, 'success')
        router.back() //跳转上一级页面
      } else {
        openInfo(res.msg, "warning")
      }
    })
  }
}


</script>

<style scoped>
/*背景*/
.background {
  height: 100vh;
  background: url("/src/assets/img/logbg2.png") no-repeat;
  /*不平铺*/
  background-size: cover;
  /*覆盖 */
  /* 开启弹性布局使其中元素居中 */
  display: flex;
  justify-content: center;
  align-items: center;
}

/*登录卡片*/
.box {
  width: 60%;
  height: 60%;
  min-width: 800px;
  min-height: 600px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(0.5px);
  /*设置模糊*/
  background: rgba(134, 123, 123, 0.1);
  display: flex;
  flex-direction: column;
  /*改变flex容器方向*/
  justify-content: center;
  align-items: center;
  border-radius: 10px;
}

/*修改密码标题 */
h1 {
  font-size: 25px;
  color: black;
  font-weight: 800;
  margin-bottom: 30px;
  font-size: 40px;
  font-family: "圆体-简";
}

/* 提交按钮 */
.subButton {
  width: 180px;
  height: 40px;
  border-radius: 5px;
  background-color: rgba(43, 170, 149, 0.2);
  border: none;
  font-size: 15px;
  color: #fff;
  text-align: center;
  line-height: 40px;
  margin-top: 30px;
  margin-right: 20px;
  user-select: none;
  /*无法选中 */
  cursor: pointer;
  /*触碰变手指 */
  transition: background-color 0.8s ease, box-shadow 2s ease;
  /* 添加过渡*/
}

.subButton:hover {
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25);
  /*阴影 */
  background-color: rgba(43, 170, 149, 0.8);
}

/*获取验证码按钮 */
.code-button {
  cursor: pointer;
  /*触碰变手指 */
  user-select: none;
  /*无法选中 */
  font-family: "楷体";
}

/* 验证码按钮 */
.el-input>>>.el-input-group__append:hover {
  background-color: rgb(255, 255, 255);
}

/*输入框 */
.el-input {
  margin-top: 20px;
  height: 50px;
  width: 300px;
}

/* 输入框透明 */
.el-input>>>.el-input__wrapper {
  background-color: transparent !important;
}

/*输入框字体样式 */
.el-input>>>.el-input__wrapper .el-input__inner {
  color: #81e3ee !important;
  font-family: "楷体";
  font-size: 18px;
}
</style>